<template>
  <n-modal
    v-model:show="showDialog"
    preset="dialog"
    class="rounded-[24px]"
    title=""
    :closable="true"
    :show-icon="false"
    :close-on-esc="true"
    :mask-closable="true"
    :style="{ width: props.width + 'px' }"
  >
    <slot></slot>
  </n-modal>
</template>

<script setup>
import { ref } from "vue";
const showDialog = ref(false);
const props = defineProps({
  width: {
    type: Number,
    default: 400,
  },
});
const show = () => {
  showDialog.value = true;
};
const close = () => {
  showDialog.value = false;
};

defineExpose({ show, close });
</script>

<style lang="scss" scoped></style>
